<template>
    <div class="broadcast">
        <div class="broadcastHeader">
                <span> ＜ </span>
                <span> 直播看房 </span>
        </div>
        <div class="broadcastTap">
             <span v-for="item,index in searchlist" :key="index" :class="carindex==index ? 'active':''" @click="changeCarindex(index)">
                    {{item}}
             </span>
        </div>
        <div class="broadcastContent">
            <div v-for="item,index in searchlist" :key="index" >
                <navigator url="/components/zhibo">
                    <img src="../static/broadcast/q1.png" alt="">
                </navigator>
            </div>
            <!-- <img src="https://imgwcs3.soufunimg.com/viewimage/live/2021_06/20/pic/02139aed-684b-4c76-b156-2b649da4b0c0/234x176c.jpg" alt=""> -->
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            searchlist:['不限','正在直播','精彩回放'],
            carindex:0
        }
    },
    methods: {
        changeCarindex(i){
            console.log(i);
            this.carindex=i
        }
    },
}
</script>

<style scoped lang="scss">
    .broadcast{
        width: 100%;
        height: 100%;
        .broadcastHeader{
            width: 100%;
            height: 120rpx;
            padding-top: 70rpx;
            display: flex;
            background-image: linear-gradient(90deg,#0272f0, #329efd);
            span{
                color: white;
            }
            span:nth-child(2){
                margin-left: 35%;
            }
        }
        .broadcastTap{
            width: 100%;
            height: 100rpx;
            margin-top: 30rpx;
            display: flex;
            justify-content: space-around;
            span{
                display: inline-block;
                padding: 0px 20rpx;
                height: 90rpx;
                line-height: 90rpx;
                background-color: #f6f6f6;
                border: 1px solid #f6f6f6;
            }
            .active{
                border: 1px solid #e999a1;
                border-radius: 10px;
            }
        }
        .broadcastContent{
            width: 90%;
            margin: 0 auto;
            img{
                width: 100%;
                height: 400rpx;
            }
        }
    }
</style>